<template>
	<view>
		<view class="top_box_title" :style="'padding-top:' + titleHeight + 'rpx'">
			<!-- 取消 -->
		</view>
		<view class="log_box">
			<image src="@/static/logo.png" mode="widthFix" style="width: 250rpx;height: 250rpx;"></image>
		</view>
		<view>
			<button class="btna" open-type="getPhoneNumber" @getphonenumber="Wxlogin">
				<view class="btna_flx">
					<!-- <image src="@/static/weixi.png" class="btna_iamg" mode="aspectFill"></image> -->
					<view style="font-size: 34rpx;color: #fff;">授权手机号登陆</view>
				</view>
			</button>
			
			<view class="" style="display: flex;justify-content: center;">
				<view class="page_yonghu">
					<u-checkbox-group v-model="value1"  placement="column"
						@change="groupChange">
						<u-checkbox>
						</u-checkbox>
					</u-checkbox-group>
					<view class="page_text">
						我已阅读并同意<span @click="toUser" style="color: #02A7F0;">认养协议</span>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleHeight: 0,
				value1: [],
			}
		},
		onShow() {
			this.getHeight()
		},
		methods: {
			groupChange() {
				console.log(this.value1)
				if (this.value1) {
					this.value1 = false
				}
			},
			toUser() {
				uni.navigateTo({
					url: '/pages/my/xieyi/xieyi'
				})
			},
			getHeight() {
				let res = uni.getMenuButtonBoundingClientRect();
				this.titleHeight = (res.top + 40) * 2;
			},
			Wxlogin(e) {
				let that = this
				if(this.value1.length==0){
					uni.showModal({
					    title: '提示',
					    content: '是否同意认养协议',
					    success: function (res) {
					        if (res.confirm) {
					            this.value1=[[]]
								if (e.detail.code) {
									uni.login({
										provider: 'weixin',
										success: function(rs) {
											that.$api.request('system/user/wxLogin', 'post', {
												wxCode: rs.code,
												phoneCode: e.detail.code
											}).then((res1) => {
												if (res1.code == '200') {
													uni.setStorageSync('token', res1.data.token)
													uni.setStorageSync('shareId', res1.data.user)
													if(uni.getStorageSync('subBeehiveId')){
														uni.redirectTo({
															url:'/pages/index/adopt/adopt'
														})
													}else{
														uni.navigateBack()
													}
												}
											})
										}
									});
								} else {
									// uni.showToast({
									// 	title: '',
									// 	icon: 'none'
									// })
								}
					        } else if (res.cancel) {
								if(uni.getStorageSync('subBeehiveId')){
									uni.redirectTo({
										url:'/pages/index/adopt/adopt'
									})
								}else{
									uni.reLaunch({
										url:'/pages/home'
									})
								}
					        }
					    }
					});
				}else{
					if (e.detail.code) {
						uni.login({
							provider: 'weixin',
							success: function(rs) {
								that.$api.request('system/user/wxLogin', 'post', {
									wxCode: rs.code,
									phoneCode: e.detail.code
								}).then((res1) => {
									console.log(res1)
									if (res1.code == '200') {
										uni.setStorageSync('token', res1.data.token)
										uni.setStorageSync('shareId', res1.data.user)
										if(uni.getStorageSync('subBeehiveId')){
											uni.redirectTo({
												url:'/pages/index/adopt/adopt'
											})
										}else{
											uni.reLaunch({
												url:'/pages/home'
											})
										}
									}
								})
							}
						});
					} else {
						// uni.showToast({
						// 	title: '',
						// 	icon: 'none'
						// })
					}
				}
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.page_text {
		font-size: 26rpx;
		color: #AFAFAF;
	}

	.page_text span {
		color: #1A1A1B;
	}

	.page_yonghu {
		display: flex;
		align-items: center;
		margin-top: 55rpx;
	}

	.btna_flx {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
	}

	.top_box_title {
		width: 95%;
		text-align: right;
		font-size: 35rpx;
	}

	.btna_iamg {
		width: 56rpx;
		height: 44rpx;
		margin-right: 15rpx;
	}

	.btna {
		width: 600rpx;
		height: 85rpx;
		background-color: #3CB631;
		border-radius: 60rpx;
		margin-top: 50rpx;
	}

	.log_box {
		text-align: center;
		margin-top: 200rpx;
	}
</style>